<template>
  <a-row>
    <a-col :span="24">
        <a-form class="config-form" layout="vertical" :model="tcpConfig">
            <a-row type="flex" :gutter="8">
                <a-col >
                    <a-form-item label="IP地址">
                        <a-input v-model:value="tcpConfig.ip"></a-input>
                    </a-form-item>
                </a-col>
                <a-col >
                    <a-form-item label="端口号">
                        <a-input v-model:value="tcpConfig.port"></a-input>
                    </a-form-item>
                </a-col>
                <a-col>
                    <a-form-item label=" ">
                        <a-space>
                            <!-- <a-button @click="check">check</a-button> -->
                            <a-button @click="connect" v-if="!status">连接</a-button>
                            <a-button danger @click="close" v-else>关闭</a-button>
                        </a-space>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-col>

    <a-col :span="24"> 
        <cmd-form title="01H指令（读线圈寄存器）" :result="coilsResult" @submit="readCoils" />
        <cmd-form title="02H指令（读离散寄存器）" :result="discreteResult" @submit="readDiscreteInputs" />
        <cmd-form title="03H指令（读保持寄存器）" :result="holdingResult" @submit="readHolding" />
        <cmd-form title="04H指令（读输入寄存器）" :result="inputResult" @submit="readInput" />
        <cmd-form title="05H指令（写单个线圈寄存器）" checked :result="fc5Result" @submit="writeFC5" />
        <cmd-form title="06H指令（写单个保持寄存器）" :result="fc6Result" @submit="writeFC6" />
    </a-col>

    <a-col :span="24">
        <section class="code-box-meta">
          <div class="code-box-title">
              <span>自定义指令</span>
          </div>
          <div class="code-box-description">
            <a-form layout="inline" :model="custom">
                <a-form-item label="指令">
                    <a-input style="width: 300px;" v-model:value="custom.value" />
                </a-form-item>
                <a-form-item>
                    <a-button :disabled="!status" type="primary" @click="send">发送</a-button>
                </a-form-item>
            </a-form>
          </div>
        </section>
      </a-col>

    </a-row>
</template>

<script>
import { ipc } from '@/utils/ipcRenderer'
import CmdForm from '@/components/cmdForm.vue'
const ctl = 'controller.modbusOverTCP.'
export default {
    components: {
        CmdForm
    },

  data () {
    return {
      tcpConfig: {
          ip: '192.168.0.80',
          port: 10123
      },
      custom: {
        value: '',
      },
      customeResult: '',

      coilsResult: '',
      discreteResult: '',
      holdingResult: '',
      inputResult: '',
      fc5Result: '',
      fc6Result: '',
    }
  },
computed: { 
    status () {
        return this.$store.state.overTcpStatus
    }
  },
  methods: {
    invoke (cmd, args) {
        return new Promise((resolve, reject) => {
            ipc.invoke(ctl + cmd, args).then(res => { 
                if (res.status) {
                    this.$message.success('发送成功') 
                    resolve(res.data)
                } else {
                    this.$message.error(res.msg)
                    reject()
                }
            })
        })
    },
    connect () {
        ipc.invoke(ctl + 'connect', { ...this.tcpConfig }).then(res => { 
            console.log(res)
            if (res.status) {
                // 检查连接状态
                this.check()
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    close () {
        ipc.invoke(ctl + 'close', {}).then(res => { 
            if (res.status) {
                this.$store.state.overTcpStatus = false
                this.$message.success('关闭成功')
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    send () {
        let args = { ...this.custom }
        args.value = this.custom.value.replaceAll(' ', '')
        if (!args.value) {
            this.$message.error('请输入指令')
            return
        }
        ipc.invoke(ctl + 'send', args).then(res => { 
            console.log(res)
            if (res.status) {
                this.$message.success('发送成功')
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    check () {
        ipc.invoke(ctl + 'checkConnect', { }).then(res => { 
            if (res.status) {
                this.$message.success('已连接')
                this.$store.state.overTcpStatus = true
            } else {
                this.$store.state.tcpStatus = false
                // this.$message.error(res.msg)
            }
        })
    },
    readCoils (e) { 
        this.invoke('readCoils', { ...e }).then(res => { 
            this.coilsResult = res.data
        })
    },
    readDiscreteInputs (e) { 
        this.invoke('readDiscreteInputs', { ...e }).then(res => { 
            this.discreteResult = res.data
        })
    },
    readHolding (e) { 
        this.invoke('readHolding', { ...e }).then(res => { 
            this.holdingResult = res.data
        })
    },
    readInput (e) { 
        this.invoke('readInput', { ...e }).then(res => { 
            this.inputResult = res.data                        
        })
    },
    writeFC5 (e) { 
        console.log(e)
        this.invoke('writeFC5', { ...e }).then(res => { 
            this.fc5Result = res.data                        
        })
    },
    writeFC6 (e) { 
        this.invoke('writeFC6', { ...e }).then(res => { 
            this.fc6Result = res.data
        })
    },
  }
}
</script>

<style scoped>

</style>